<template >
  <a-row :gutter="10" >
    <a-col :md="leftColMd" :sm="24" >
      <a-card :bordered="false"  style="background-color: #FBE5D6;">
        <a-layout class="layout" :class="[device]" >
          <!-- <div class="container">
              <div v-for="(item, index) in cases" :key="index" class="iteminfo">
                <CaseCard :Case="item" @showdetail="openSubMenu" ></CaseCard>
              </div>
          </div> -->
        <template class="container" >
            <!-- <a-list class="list" 
          :grid="{ gutter: 24, lg: 1, md: 2, sm: 1, xs: 1 }"
          :dataSource="cases" style="min-width: 80%;background-color: white;width: 700px;"
        > -->
        <!-- <a-list-item class="device" v-if="type==='device'" slot="renderItem" slot-scope="item, index" style="margin-top: -5px;"> -->
        
            <div v-if="type==='device'" >
              <vueSeamless :data="cases" :class-option="productOption" >
                <div class="device">
              <div v-for="item in cases" >
                <div>
                  <ProductCard :Product="item" @showdetail="openSubMenu"></ProductCard>
                </div>
            </div> 
          </div>
          </vueSeamless>
          </div>
          <div v-else>
            <vueSeamless :data="cases" :class-option="defaultOption">
            <div   v-for="item in cases" style="min-width: 80%;background-color: white;width: 700px;">
            <template v-if="type==='case'">
                <CaseCard :Case="item" @showdetail="openSubMenu" ></CaseCard>
            </template>
            <template v-if="type==='news'">
                <NewsCard :News="item" @showdetail="openSubMenu" ></NewsCard>
            </template>
          
          </div>
        </vueSeamless>
          </div>
            
          
          
          <!-- </a-list-item> -->
          <!-- <a-list-item v-else  slot="renderItem" slot-scope="item, index" style="margin-top: -5px;"> -->
            
            
          <!-- </a-list-item> -->
        <!-- </a-list> -->
        </template>
       
      </a-layout>
        <!-- <yks-equipment-list ref="equipmentList" @openSubMenu="openSubMenu"/> -->
      </a-card>
    </a-col>
    <a-col :md="rightColMd" :sm="24">
      <div style="text-align: left;margin-left: 20px;  margin-bottom: -30px;z-index: 1;position:relative">
        <a-tooltip placement="top" title="返回案例列表">
            <a-icon type="arrow-left" @click="openMainMenu" style="width: 30px;font-size: large;" />
        </a-tooltip>
    </div>
      <a-card :bordered="false">
        
        
      
        <PublishContent  ref="publistContent" :text="Case.publishContent" ></PublishContent>
        
      </a-card>
    </a-col>
  </a-row>
    
</template>
<script>
import SideMenu from '@/components/menu/SideMenu'
import { mixin, mixinDevice } from '@/utils/mixin.js'
import CaseCard from '../../components/yks/CaseCard.vue'
import { httpAction, getAction } from '@/api/manage'
import PublishContent from '../../components/yks/PublishContent.vue';
import ProductCard from '../../components/yks/ProductCard.vue';
import NewsCard from '../../components/yks/NewsCard.vue';
import vueSeamless from 'vue-seamless-scroll'
export default {
    name: 'RollCard',
    props: {
        type: String
    },
    components: {
    SideMenu,
    CaseCard,
    ProductCard,
    NewsCard,
    PublishContent,
    vueSeamless
},
    mixins: [mixin, mixinDevice],
    data() {
      return {
        collapsed: false,
        activeMenu:{},
        rightColMd : 0,
        leftColMd : 21,
        text:"明细内容",
        Context:"明细内容",
        Case:{},
        selectedKeys: [],
        caseTree: [],
      autoExpandParent: true,
      iExpandedKeys: [],
      treeData: [],
      checkedKeys: [],
        menus: [{
            id:"31118BD8B90B4171996AB174663BE575",
            children: [
                    {
                        id: "6FD93786E6FC4D93AE514452BADF5EAC",
                        component: "layouts/RouteView",
                        menuType: 1,
                        meta: {
                            componentName: "RouteView",
                            internalorExternal: false,
                            keepAlive: false,
                            title: "工业清洗项目"
                        },
                        name: "idevset",
                        path: "/dashboard/analysis/IndexYkCases/D001",
                        route: "1"
                    },
                    {
                        id: "F501C5C19D634B6BA05AA94D61C90193",
                        component: "layouts/RouteView",
                        menuType: 1,
                        meta: {
                            componentName: "RouteView",
                            internalorExternal: false,
                            keepAlive: false,
                            title: "油液净化项目"
                        },
                        name: "idevset",
                        path: "/dashboard/analysis/IndexYkCases/D002",
                        route: "1"
                    },
                    {
                        id: "F501C5C19D634B6BA05AA94D61C90193",
                        component: "layouts/RouteView",
                        menuType: 1,
                        meta: {
                            componentName: "RouteView",
                            internalorExternal: false,
                            keepAlive: false,
                            title: "集中供液项目"
                        },
                        name: "idevset",
                        path: "/dashboard/analysis/IndexYkCases/D003",
                        route: "1"
                    }
                ],
            component:"layouts/RouteView",
            menuType:1,
            meta:{
                componentName:"RouteView",
                internalorExternal: false,
                keepAlive: false,
                title:"自动化项目"
            },
            name:"idevset",
            path:"/idevset",
            route:"1"
        },
        {
            id:"036A1353429947439B2ED9BB9FF03C19",
            children: [
                    {
                        id: "6FD93786E6FC4D93AE514452BADF5EAC",
                        component: "layouts/RouteView",
                        menuType: 1,
                        meta: {
                            componentName: "RouteView",
                            internalorExternal: false,
                            keepAlive: false,
                            title: "废弃处理项目"
                        },
                        name: "idevset",
                        path: "/dashboard/analysis/IndexYkCases/D005",
                        route: "1"
                    },
                    {
                        id: "F501C5C19D634B6BA05AA94D61C90193",
                        component: "layouts/RouteView",
                        menuType: 1,
                        meta: {
                            componentName: "RouteView",
                            internalorExternal: false,
                            keepAlive: false,
                            title: "污水处理项目"
                        },
                        name: "idevset",
                        path: "/dashboard/analysis/IndexYkCases/D004",
                        route: "1"
                    }
                ],
            component:"layouts/RouteView",
            menuType:1,
            meta:{
                componentName:"RouteView",
                internalorExternal: false,
                keepAlive: false,
                title:"环保项目"
            },
            name:"idevconfig",
            path:"/idevconfig",
            route:"1"
        }
    ],
        submenus:[],
        cases:[
        //   {
        //     Id:1,
        //     Title:"工业清洗设备",
        //     Detail:"工业清洗设备展示明细内容",
        //     Content:"'## 哈哈![](http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg)'",
        //     Url:"http://www.baidu.com",
        //     ImgUrl:"http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg"
        // },
        // {
        //     Id:1,
        //     Title:"工业清洗设备",
        //     Detail:"工业清洗设备展示明细内容",
        //     Content:"'## 哈哈![](http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg)'",
        //     Url:"http://www.baidu.com",
        //     ImgUrl:"http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg"
        // },
        // {
        //     Id:1,
        //     Title:"工业清洗设备",
        //     Detail:"工业清洗设备展示明细内容",
        //     Content:"'## 哈哈![](http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg)'",
        //     Url:"http://www.baidu.com",
        //     ImgUrl:"http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg"
        // },
        // {
        //     Id:1,
        //     Title:"工业清洗设备",
        //     Detail:"工业清洗设备展示明细内容",
        //     Content:"'## 哈哈![](http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg)'",
        //     Url:"http://www.baidu.com",
        //     ImgUrl:"http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg"
        // },
        // {
        //     Id:1,
        //     Title:"工业清洗设备",
        //     Detail:"工业清洗设备展示明细内容",
        //     Content:"'## 哈哈![](http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg)'",
        //     Url:"http://www.baidu.com",
        //     ImgUrl:"http://localhost:8080/jeecg-boot/sys/common/static/temp/1703940959213_1704190077281.jpg"
        // }
    ],
    allCases:[],
    url: {
          list: "/mng/yksPublishs/list",
          treeData:"/sys/category/loadTreeRoot",
        },
        equipmentType : '',
      }
    },
    watch: {
    $route:{
      handler: function(nval,oval){
        this.changePage();
      }
    },
    
  },
  computed:{
      defaultOption(){
        return{
          step:0.2,//数值越大速度滚动越快
          limitMoveNum:3,//开始无缝滚动的数据量
          hoverStop:true,//是否开启鼠标悬停stop
          direction:1,//0向下  1向上 2向左 3向右
          openWatch:true,//开启数据实时监控刷新dom
          singleHeight:0,//单步运动停止的高度（默认值0是无缝不停止的滚动）direction=>0/1
          singleWidth:0,//单步运动停止的宽度（默认值0是无缝不停止的滚动）direction=>2/3
          waitTime:1000,//单步运动停止的时间（默认值1000ms）
        }
      },
      productOption(){
        return{
          step:0.1,//数值越大速度滚动越快
          limitMoveNum:1,//开始无缝滚动的数据量
          hoverStop:true,//是否开启鼠标悬停stop
          direction:3,//0向下  1向上 2向左 3向右
          openWatch:true,//开启数据实时监控刷新dom
          singleHeight:0,//单步运动停止的高度（默认值0是无缝不停止的滚动）direction=>0/1
          singleWidth:0,//单步运动停止的宽度（默认值0是无缝不停止的滚动）direction=>2/3
          waitTime:1000,//单步运动停止的时间（默认值1000ms）
        }
      }
    },
    mounted(){
      this.loading = true
      // this.loadTree()
      this.loadData(1)
    },
    methods:{
      changePage(){
      if (this.$route.path.indexOf("/dashboard/analysis/IndexYkDevices") != -1) {
       let arr = this.$route.path.split("/")
       console.log(arr[arr.length - 1])
       this.equipmentType = arr[arr.length - 1]
      //  this.isSystemRpt = false
      }
       this.loadData(1)
    },
    loadTree() {
      let param = {
        pcode:'B04',
        async:false
      }
      debugger
      var that = this
      that.treeData = []
      that.caseTree = []
      getAction(this.url.treeData,param).then((res) => {
        debugger
        if (res.success && res.result ) {
          debugger
          for (let i = 0; i < res.result.length; i++) {
            let temp = res.result[i]
            that.treeData.push(temp)
            that.caseTree.push(temp)
            that.setThisExpandedKeys(temp)
            // console.log(temp.id)
          }
          // debugger
          // let treeList=res.result
          // let root=treeList.filter(p=>p.pid=='0')
          // that.treeData.push(root)
          // that.caseTree.push(root)
          // this.loadTreeChild(root,treeList)
          // that.setThisExpandedKeys(root)
          // this.loading = false
        }
        that.userIdentity = res.message
      })
    },
    loadTreeChild(parent,result){
            parent.children=result.filter(p=>p.pid=parent.id)
            for (let i = 0; i < parent.children.length; i++) {
              if(parent.children[i].hasChild==1){
                this.loadTreeChild(parent.children[i],result)
              }
          }
    },
    setThisExpandedKeys(node) {
      //只展开一级目录
      if (node.children && node.children.length > 0) {
        this.iExpandedKeys.push(node.key)
        //下方代码放开注释则默认展开所有节点
        /**
        for (let a = 0; a < node.children.length; a++) {
          this.setThisExpandedKeys(node.children[a])
        }
        */
      }
    },
    onExpand(expandedKeys) {
      this.iExpandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onSelect(selectedKeys, e) {
      if (this.selectedKeys[0] !== selectedKeys[0]) {
        this.selectedKeys = [selectedKeys[0]];
      }
      let record = e.node.dataRef;
      debugger
      this.cases=[]
      this.checkedKeys.push(record.key);
      this.cases=this.allCases.filter(p=>p.selectCategory==record.key)
      // for(var i=0;i<this.allCases.length;i++){
      //   if(this.allCases[i].selectCategory==record.id){
      //     this.cases.push(this.allCases[i])
      //   }
      // }
      
      // this.$refs.DeptBaseInfo.open(record);
      // this.$refs.DeptUserInfo.onClearSelected();
      // this.$refs.DeptUserInfo.open(record);
      // this.$refs.DeptRoleInfo.onClearSelected();
      // this.$refs.DeptRoleInfo.open(record);
    },
        menuSelect() {
        if (!this.isDesktop()) {
          this.collapsed = false
        }
      },
      openSubMenu(item){
        debugger
        this.Case=item
         this.rightColMd = 24
         this.leftColMd = 0
        
      },
      openMainMenu() {
         this.rightColMd = 0
         this.leftColMd = 24
      },
      handleUpdateMenuTitle(value) {
        if(value.hasOwnProperty('children')){
          
          this.submenus=value.children
          this.collapsed=true
        }
        else{
          
          this.submenus=[]
          this.collapsed=false
        }
        
      },
      loadData(arg) {
        if(!this.url.list){
          this.$message.error("请设置url.list属性!")
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          // this.ipagination.current = 1;
        }
        var params = {}//this.getQueryParams();//查询条件
        if(this.equipmentType!="")
      {
        params.equipmentType = this.equipmentType
      }
        params.publishType = this.type;
        this.loading = true;
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            this.cases = res.result.records||res.result;
            for(var i=0;i<this.cases.length;i++){
              this.cases[i].coverimageUrl=window._CONFIG['domianURL']+'/'+this.cases[i].coverimageUrl
              this.allCases.push(Object.assign({}, this.cases[i]))
            }
            // if(res.result.total)
            // {
            //   this.ipagination.total = res.result.total;
            // }else{
            //   this.ipagination.total = 0;
            // }
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          }else{
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
        })
      },
    }
}

</script>

<style lang="less" scoped>
   
        // height: 300px;
        .layout{
          display: flex;
        flex-direction: column;
            width: 100%;
            background-color: #FBE5D6;
            margin-bottom: 200px;
            margin-right: 100px;
        }
        .container{
          overflow-y: scroll;
          background-color: #FBE5D6;
        }
        .iteminfo img {
            width: auto; /* 图片宽度 */
            height:50px ; /* 自动计算高度保持原始比例 */
        }

        .device{
           width: 700px;
          display: flex;
          background-color: #FBE5D6;
          // background-color: blue;
          margin-right: 0px;
          // display: -webkit-box;
          // display: -webkit-flex;
          flex-direction: row;
          // overflow: hidden;
          // -webkit-line-clamp: 3;
          // -webkit-box-orient: vertical;
          // justify-content: space-between;
        }
</style>